<template>
	<view class="level">
		<!-- <image src="https://www.stck.cc/my/vipicon.png" class="icon" mode=""></image> -->
		
		<view class="word">购买置顶	</view>
		<view class="word" style="margin-top: 30rpx;">服务任务置顶显示</view>
		<image style="margin-top: 30rpx;" :src="oss(meal[0].image)" class="icon" mode="aspectFill"></image>
		<view class="box">
			<!-- <view class="level" :class="{active: type === 0}" @click="select(0,info.month)">
				<view class="t">月会员</view>
				<view class="b">{{info.month}}元</view>
			</view>
			<view class="level" :class="{active: type === 1}" @click="select(1,info.quarter)">
				<view class="t">季会员</view>
				<view class="b">{{info.quarter}}元</view>
			</view>
			<view class="level" :class="{active: type === 2}" @click="select(2,info.year)">
				<view class="t">年会员</view>
				<view class="b">{{info.year}}元</view>
			</view> -->
			<view style="min-width: 200rpx;text-align: center;border-radius: 20rpx;background-color: #FFF;margin-left: 24rpx;">
				
			</view>
			
			<view style="min-width: 200rpx;text-align: center;border-radius: 20rpx;background-color: #FFF7F5;margin-left: 24rpx;border: 2px solid #FFF7F5;" v-for="i in meal" :class="{active: type === i.id}" @click="select(i)">
				<view style="font-size: 26rpx;padding-top: 32rpx;">{{i.day}}天</view>
				<view style="font-size: 22rpx;color: #FC6605;padding-top: 16rpx;">￥ <text style="font-size: 36rpx;font-weight: 500;">{{i.num}}</text> <text v-if="i.original_num!=0" style="text-decoration: line-through;color: #aaa;">￥{{i.original_num}}</text> </view>
				<view style="height: 60rpx;width: 1rpx;"></view>
				<view style="background-color: #FF7A7A;color: #FFF;font-size: 24rpx;border-radius: 0 0 20rpx 20rpx;padding: 8rpx 0;"> 约{{i.day_num}}/天 </view>
			</view>
			
			<view style="min-width: 200rpx;text-align: center;border-radius: 20rpx;background-color: #FFF;margin-left: 24rpx;">
				
			</view>
		</view>
		<view class="btns" @click="authTo(`pages/common/paylevel?type=${type}&money=${money}&myMoney=${myMoney}`)">购买置顶</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				type: 0,
				money: '',
				myMoney:'',
				meal: [],
			};
		},
		onLoad() {
			this.getInfo() 
			this.getMoney()
		},
		methods:{
			getMoney(){
				uni.$u.http.post('/getmoney ').then(res => {
					if (res.code === 1) {
						this.myMoney = res.data
					}
				}).catch((res) => {
					
				})
			},
			// select(type,money) {
			// 	this.type = type
			// 	this.money = money
			// },
			select(item) {
				this.type = item.id
				this.money = item.num
				// this.money = money
			},
			getInfo() {
				uni.$u.http.post('/meallist',{
					mealtype:6
				}).then(res => {
					if (res.code === 1) {
						this.meal = res.data
						this.type = this.meal[0].id
						this.money = this.meal[0].num
					}
				}).catch((res) => {
					
				})
				// uni.$u.http.post('/rechargeuser').then(res => {
				// 	if (res.code === 1) {
				// 		this.info = res.data;
				// 		this.money = res.data.month
				// 	}
				// }).catch((res) => {
					
				// })
			},
			level() {
				
			}
		}
	}
</script>

<style lang="scss">
page{
	height: 100%;
}
.level{
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	box-sizing: border-box;
	padding-top: 100rpx;
	.btns{
		background: linear-gradient(to right, #FFDF41, #FFC141);
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #191615;
		border-radius: 44rpx;
		width: 590rpx;
		// position: absolute;
		// left: 80rpx;
		// bottom: 80rpx;
		margin-top: 60rpx;
		flex-shrink: 0;
		font-weight: bold;
	}
	.box{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 40rpx 0 0;
		// padding: 0 32rpx;
		padding-left: 180rpx;
		
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		.level{
			border: 1px solid #999;
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			align-items: center;
			border-radius: 4rpx;
			margin: 0 30rpx ;
			.t,.b{
				font-size: 28rpx;
				color: #999;
			}
		}
		.active{
			border: 2px solid #FF7A7A !important;
			// .t,.b{
			// 	font-size: 28rpx;
			// 	color: #FF5B1A;
			// }
		}
	}
	.icon{
		width: 513rpx;
		height: 371rpx;
	}
	.word{
		color: #FF5B1A;
		font-size: 40rpx;
	}
}
</style>
